<template>
  <!-- 滚动加载-->
  <nut-infinite-loading v-model="infinityValue" :has-more="hasMore" @load-more="loadMore">
    <!-- 布瀑流 -->
    <Waterfall
      :list="dataList"
      :breakpoints="{ 1200: { rowPerView: 2 } }"
      :load-props="{
        ratioCalculator: (width: number, height: number) => {
          let ratio = 1;
          if (width > height) ratio = 3 / 4;
          else if (width < height) ratio = 4 / 3;
          return ratio;
        },
      }"
    >
      <template #item="{ item }">
        <div class="card rounded-lg shadow overflow-hidden" @click="feedDetail(item.feedType, item.id)">
          <LazyImg :url="item.feedType === 1 ? item.imageUrls[0] : item.videoCoverUrl" />
          <p class="text px-3 pb-3 mt-2 text-sm">{{ item.feedTitle }}</p>
        </div>
      </template>
    </Waterfall>
  </nut-infinite-loading>
</template>

<style>
.lazy__img {
  object-fit: cover;
}
</style>

<script setup lang="ts">
import { LazyImg, Waterfall } from "vue-waterfall-plugin-next";
import "vue-waterfall-plugin-next/dist/style.css";
import * as FeedApi from "@/api/official-website/unit-feed";
import { useRouter } from "vue-router";

const router = useRouter();

// 列表数据
const dataList = ref<FeedApi.FeedDetail[]>([]);

let page = { pageNo: 1, pageSize: 10 };

const infinityValue = ref(false);
const hasMore = ref(true);
// 加载数据
const loadMore = () => {
  setTimeout(async () => {
    page.pageNo += 1;
    let list = await getData();
    if (list.length > 0) {
      dataList.value = [...dataList.value, ...list];
      infinityValue.value = false;
      return;
    }
    hasMore.value = false;
    infinityValue.value = false;
  }, 500);
};

// 获取信息列表
// 获取数据
const getData = async () => {
  let res = await FeedApi.getFeed(page);

  // 进行排序
  res.data.list
    .sort((prev, next) => prev.sortNo - next.sortNo)
    .forEach((item: any) => {
      item.clue_status = 1;
      if (item.residueTime === 0) {
        item.clue_status = 2;
      }
    });
  return res.data.list;
};
getData().then((res) => {
  dataList.value = res;
});

// 跳转到信息详情
const feedDetail = (feedType: number, id: string) => {
  // 判断类型，传递id
  router.push(`/information/${feedType === 1 ? "text" : "video"}-content?id=` + id);
};
</script>
